<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>浮动 |  zfy的个人博客</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="./img/Scorpio.png">
    <link rel="stylesheet" href="./css/style.css">
    <meta name="description" content="My tech blog">
    
    <link rel="preload" href="./assets/css/0.styles.cfdaa54c.css" as="style"><link rel="preload" href="./assets/js/app.7878252f.js" as="script"><link rel="preload" href="./assets/js/2.877879cc.js" as="script"><link rel="preload" href="./assets/js/24.66bf035d.js" as="script"><link rel="prefetch" href="./assets/js/10.a489e96f.js"><link rel="prefetch" href="./assets/js/11.f6f26a2f.js"><link rel="prefetch" href="./assets/js/12.8a827e29.js"><link rel="prefetch" href="./assets/js/13.e420b04a.js"><link rel="prefetch" href="./assets/js/14.52f00cc6.js"><link rel="prefetch" href="./assets/js/15.ef68d553.js"><link rel="prefetch" href="./assets/js/16.c2999dfd.js"><link rel="prefetch" href="./assets/js/17.0adb748c.js"><link rel="prefetch" href="./assets/js/18.2c077020.js"><link rel="prefetch" href="./assets/js/19.013b5e02.js"><link rel="prefetch" href="./assets/js/20.bb3b854e.js"><link rel="prefetch" href="./assets/js/21.28efc78c.js"><link rel="prefetch" href="./assets/js/22.4a1d71dd.js"><link rel="prefetch" href="./assets/js/23.605a5451.js"><link rel="prefetch" href="./assets/js/25.fbe72655.js"><link rel="prefetch" href="./assets/js/26.3f374d1f.js"><link rel="prefetch" href="./assets/js/27.556ea617.js"><link rel="prefetch" href="./assets/js/28.0cab868b.js"><link rel="prefetch" href="./assets/js/29.564f8747.js"><link rel="prefetch" href="./assets/js/3.4cfb1b9c.js"><link rel="prefetch" href="./assets/js/30.c4a099d1.js"><link rel="prefetch" href="./assets/js/31.7fbc3d2a.js"><link rel="prefetch" href="./assets/js/32.8f356b20.js"><link rel="prefetch" href="./assets/js/33.b5a1b0bb.js"><link rel="prefetch" href="./assets/js/34.57086c2e.js"><link rel="prefetch" href="./assets/js/35.2b4d0231.js"><link rel="prefetch" href="./assets/js/36.a99f6d64.js"><link rel="prefetch" href="./assets/js/37.eb25dcef.js"><link rel="prefetch" href="./assets/js/38.e45d8594.js"><link rel="prefetch" href="./assets/js/39.213e3a72.js"><link rel="prefetch" href="./assets/js/4.b86a0fbe.js"><link rel="prefetch" href="./assets/js/40.cadafdd6.js"><link rel="prefetch" href="./assets/js/41.23b0f26d.js"><link rel="prefetch" href="./assets/js/42.7c2b83c6.js"><link rel="prefetch" href="./assets/js/43.62f328ea.js"><link rel="prefetch" href="./assets/js/44.c4dfbd34.js"><link rel="prefetch" href="./assets/js/45.cde5bb22.js"><link rel="prefetch" href="./assets/js/46.6c62bdb8.js"><link rel="prefetch" href="./assets/js/47.4857766a.js"><link rel="prefetch" href="./assets/js/48.55a0cccc.js"><link rel="prefetch" href="./assets/js/49.3dceda91.js"><link rel="prefetch" href="./assets/js/5.13776f82.js"><link rel="prefetch" href="./assets/js/50.ab4d52fa.js"><link rel="prefetch" href="./assets/js/51.69ccc35a.js"><link rel="prefetch" href="./assets/js/52.01f3f711.js"><link rel="prefetch" href="./assets/js/53.c146a1ff.js"><link rel="prefetch" href="./assets/js/54.71ce70c2.js"><link rel="prefetch" href="./assets/js/55.98ef481d.js"><link rel="prefetch" href="./assets/js/56.b23daa51.js"><link rel="prefetch" href="./assets/js/57.6aa314ad.js"><link rel="prefetch" href="./assets/js/58.7d6367d9.js"><link rel="prefetch" href="./assets/js/59.88894cf5.js"><link rel="prefetch" href="./assets/js/6.93d89692.js"><link rel="prefetch" href="./assets/js/60.111f9a04.js"><link rel="prefetch" href="./assets/js/61.add82aab.js"><link rel="prefetch" href="./assets/js/62.8bfac830.js"><link rel="prefetch" href="./assets/js/63.db44a5ca.js"><link rel="prefetch" href="./assets/js/64.0244f0ef.js"><link rel="prefetch" href="./assets/js/65.2be994de.js"><link rel="prefetch" href="./assets/js/66.c5066e37.js"><link rel="prefetch" href="./assets/js/67.c11b474b.js"><link rel="prefetch" href="./assets/js/68.276bdc3e.js"><link rel="prefetch" href="./assets/js/69.f5f39d50.js"><link rel="prefetch" href="./assets/js/7.ca9f7e96.js"><link rel="prefetch" href="./assets/js/70.e3ca02b0.js"><link rel="prefetch" href="./assets/js/71.befcf8f7.js"><link rel="prefetch" href="./assets/js/72.04fabafd.js"><link rel="prefetch" href="./assets/js/73.e5b707f2.js"><link rel="prefetch" href="./assets/js/74.b5668150.js"><link rel="prefetch" href="./assets/js/75.eb7cfac9.js"><link rel="prefetch" href="./assets/js/76.c1b76370.js"><link rel="prefetch" href="./assets/js/77.5875e953.js"><link rel="prefetch" href="./assets/js/78.a5e2fa5b.js"><link rel="prefetch" href="./assets/js/79.eb2d51a7.js"><link rel="prefetch" href="./assets/js/8.570c39ea.js"><link rel="prefetch" href="./assets/js/80.7252ac50.js"><link rel="prefetch" href="./assets/js/81.eb980d26.js"><link rel="prefetch" href="./assets/js/82.9e069d8f.js"><link rel="prefetch" href="./assets/js/83.8c5a6dc6.js"><link rel="prefetch" href="./assets/js/84.26baaa09.js"><link rel="prefetch" href="./assets/js/85.96bc7e77.js"><link rel="prefetch" href="./assets/js/86.9c9dd1ca.js"><link rel="prefetch" href="./assets/js/87.d54639b8.js"><link rel="prefetch" href="./assets/js/88.3d3ae1e1.js"><link rel="prefetch" href="./assets/js/89.a81caa83.js"><link rel="prefetch" href="./assets/js/9.7a58df3d.js"><link rel="prefetch" href="./assets/js/90.c3c347ed.js"><link rel="prefetch" href="./assets/js/91.b6240032.js"><link rel="prefetch" href="./assets/js/92.8331718a.js"><link rel="prefetch" href="./assets/js/93.ca174cfa.js"><link rel="prefetch" href="./assets/js/94.fec3300c.js"><link rel="prefetch" href="./assets/js/95.076b06fb.js"><link rel="prefetch" href="./assets/js/96.8ed8b32f.js">
    <link rel="stylesheet" href="./assets/css/0.styles.cfdaa54c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/./" class="home-link router-link-active"><!----> <span class="site-name"> zfy的个人博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>CSS</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/./guide/notes/css/03-CSS基本样式和选择器.html" class="sidebar-link">01-CSS基本样式和选择器</a></li><li><a href="/./guide/notes/css/04-盒模型.html" class="sidebar-link">02-CSS盒模型</a></li><li><a href="/./guide/notes/css/05-行内盒模型.html" class="sidebar-link">03-行内盒模型</a></li><li><a href="/./guide/notes/css/06-显示样式.html" class="sidebar-link">04-显示样式</a></li><li><a href="/./guide/notes/css/07-背景样式.html" class="sidebar-link">05-背景样式</a></li><li><a href="/./guide/notes/css/08-圆角渐变.html" class="sidebar-link">06-圆角渐变</a></li><li><a href="/./guide/notes/css/09-浮动.html" class="active sidebar-link">07-浮动</a></li><li><a href="/./guide/notes/css/10-定位.html" class="sidebar-link">08-定位</a></li><li><a href="/./guide/notes/css/css样式书写顺序和命名规范.html" class="sidebar-link">09-css样式书写顺序和命名规范</a></li><li><a href="/./guide/notes/css/13-高级选择器和伪元素.html" class="sidebar-link">11-高级选择器和伪元素</a></li><li><a href="/./guide/notes/css/14-动画样式.html" class="sidebar-link">12-动画样式</a></li><li><a href="/./guide/notes/css/15-transform.html" class="sidebar-link">13-transform</a></li><li><a href="/./guide/notes/css/16-3d和盒阴影和遮罩.html" class="sidebar-link">14-3D盒阴影和遮罩</a></li><li><a href="/./guide/notes/css/17-弹性盒模型.html" class="sidebar-link">15-弹性盒模型</a></li><li><a href="/./guide/notes/css/18-阿里图标 组件化 swiper.html" class="sidebar-link">16-阿里图标 组件化 swiper</a></li><li><a href="/./guide/notes/css/19-响应式.html" class="sidebar-link">17-响应式</a></li><li><a href="/./guide/notes/css/less.html" class="sidebar-link">less</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascipt</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML&amp;CSS练习</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascipt练习</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="浮动"><a href="#浮动" class="header-anchor">#</a> 浮动</h1> <p><strong>文档流(normal flow)布局</strong></p> <blockquote><p>网页是一个多层的结构,一层叠着一层,</p> <p>通过CSS可以分别为每一层设置样式</p> <p>作为用户来讲只能看到最顶上一层</p> <p>这些层中,最底下的一层称为文档流,文档流是网页的基础</p> <p>我们创建的元素默认都是在文档流中进行排列</p> <p>对我们元素来说主要有两个状态</p> <p>​			---在文档流</p> <p>​			---不在文档流中(脱离文档流)</p></blockquote> <p>元素在文档流中有什么特点</p> <blockquote><p>块元素</p> <p>​		--块元素在页面中独占一行,从上往下垂直排列</p> <p>​		--默认宽度是父元素的100%</p> <p>​		---默认高度是被内容撑开</p> <p>行内元素</p> <p>​		---行内元素不独占一行,在页面中自左向右水平排列,如果一行排列不下,则元素会换到第二行继续自左向右排列(水平)</p> <p>​		---默认宽高由内容撑开</p></blockquote> <p><strong>浮动:</strong></p> <p>是为了图片被文字环绕而出现的特性</p> <p>​	通过浮动可以设置一个元素向其父元素的左侧和右侧移动</p> <blockquote><p>使用float属性设置父元素的浮动</p> <p>​			可选值:</p> <p>​						none默认值  , 元素不浮动</p> <p>​						left  元素向左浮动</p> <p>​						right  元素向右浮动</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code>	<span class="token selector">div</span><span class="token punctuation">{</span>
		<span class="token property">width</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
		<span class="token property">height</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
		<span class="token property">border</span><span class="token punctuation">:</span> 3px solid skyblue<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
&lt;div&gt;
	&lt;img src=<span class="token string">&quot;1.jpg&quot;</span> alt=<span class="token string">&quot;&quot;</span>&gt;
	这个小姐姐美美哒这个小姐姐美美哒这个小姐姐美美哒这个小姐姐美美哒这个小姐姐美美哒这个小姐姐美美哒
&lt;/div&gt;	
	<span class="token comment">/*图片和文字的基线对齐,但是这个文字上边有一大段的空白区域,非常浪费.又不美观.
	  网页上的内容都是寸土寸金,每一个地方都很宝贵.
		淘宝即使那么挤,信息那么多,每个地方的价也是非常之高的.
	  现在我想让我的网页的文字从第一行环绕图片显示怎么办?*/</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">img</span><span class="token punctuation">{</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token comment">/*文字就实现了环绕图片,文字有没有被图片所遮挡了一些部分
  我们去给文字加上一些字*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;img src=<span class="token string">&quot;1.jpg&quot;</span> alt=<span class="token string">&quot;&quot;</span>&gt;<span class="token property">云牧说</span><span class="token punctuation">:</span>这个小姐姐美美哒这个小姐姐美美哒这个小姐姐美美哒这个小姐姐美美哒这个小姐姐美美哒这个小姐姐美美哒
<span class="token comment">/*可以看到文字并没有被图片所遮挡,图片后面没有文字.
  float:left有这样的基本特性,让文字环绕元素进行排列
  
	我们再去修改一下这个代码,把浮动注释,加个p标签*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">p</span><span class="token punctuation">{</span><span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span><span class="token punctuation">}</span>
&lt;img src=<span class="token string">&quot;1.jpg&quot;</span> alt=<span class="token string">&quot;&quot;</span>&gt;
&lt;p&gt;<span class="token property">云牧说</span><span class="token punctuation">:</span>这个小姐姐美美哒这个小姐姐美美哒这个小姐姐美美哒这个小姐姐美美哒这个小姐姐美美哒这个小姐姐美美哒&lt;/p&gt;
<span class="token comment">/*现在文字和图片不在同一行去显示.
  现在给图片添加浮动会发生什么?
  现在P标签为什么会上去?这段文字和图片之间的关系是什么?
  页面中所有的元素全部都是矩形,打开开发者,P标签和图片仿佛占用了同一块区域.
  现在我们重点要去说三个东西*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><blockquote><ol><li><strong>img  浮动元素</strong></li> <li><strong>P: 块级元素(感受不到浮动元素)</strong></li> <li><strong>文字:inline/inlineblock(感受得到浮动元素)</strong></li></ol></blockquote> <blockquote><p>实际上**游览器中的元素是三维的.**就好像一叠钞票一样,有的在上面,有的在下面.</p> <p><strong>页面中的元素有高低顺序,渲染的过程,会将页面的元素分类,按照从高到底的顺序渲染,</strong></p></blockquote> <p>在我们页面中.有一个东西绝对是在任何内容,无论是文本,盒子的下面.</p> <blockquote><p><strong>背景*最低层级</strong> <strong>==&gt;</strong> <strong>块级元素的层级  ==&gt;  浮动层，我们的块级元素就感受不到浮动元素了.</strong></p> <p><strong>== inline/inline-block(文本)</strong></p> <p><strong>文本元素和浮动元素天然排斥,不会重合到一起</strong>.</p></blockquote> <hr> <p><strong>浮动元素的特性</strong></p> <ol><li>文本环绕</li> <li>有多个浮动元素的情况.多个盒子浮动,会从左往右依次排列,如果当前行排不下,会&quot;换行排列&quot;;</li></ol> <div class="language-css line-numbers-mode"><pre class="language-css"><code>		<span class="token selector">.wrap</span><span class="token punctuation">{</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span>
       		<span class="token property">margin</span><span class="token punctuation">:</span> 100px auto 0<span class="token punctuation">;</span>
			<span class="token property">border</span><span class="token punctuation">:</span> 3px solid skyblue<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">.wrap .son1</span><span class="token punctuation">{</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span> lightgreen<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">.wrap .son2</span><span class="token punctuation">{</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">.wrap .son3</span><span class="token punctuation">{</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">.wrap .son4</span><span class="token punctuation">{</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span> purple<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
	&lt;div class=<span class="token string">&quot;wrap&quot;</span>&gt;
		&lt;div class=<span class="token string">&quot;son1&quot;</span>&gt;1&lt;/div&gt;
		&lt;div class=<span class="token string">&quot;son2&quot;</span>&gt;2&lt;/div&gt;
		&lt;div class=<span class="token string">&quot;son3&quot;</span>&gt;3&lt;/div&gt;
		&lt;div class=<span class="token string">&quot;son4&quot;</span>&gt;4&lt;/div&gt;							
	&lt;/div&gt;
<span class="token comment">/*此时盒子1234是正经盒子,从上往下进行排列
  现在我给里面盒子依次添加浮动*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.wrap .son1</span><span class="token punctuation">{</span><span class="token property">float</span><span class="token punctuation">:</span>left<span class="token punctuation">}</span>
<span class="token selector">.wrap .son2</span><span class="token punctuation">{</span><span class="token property">float</span><span class="token punctuation">:</span>left<span class="token punctuation">}</span>
<span class="token selector">.wrap .son3</span><span class="token punctuation">{</span><span class="token property">float</span><span class="token punctuation">:</span>left<span class="token punctuation">}</span>
<span class="token selector">.wrap .son4</span><span class="token punctuation">{</span><span class="token property">float</span><span class="token punctuation">:</span>left<span class="token punctuation">}</span>
<span class="token comment">/*左浮动:从左往右依次排列.类似文字的排列方向.
现在有四块盒子都有浮动,都会往天空飘那么一点点,到天上去排队去了,从左往右依次排列.*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.wrap .son1</span><span class="token punctuation">{</span><span class="token property">float</span><span class="token punctuation">:</span>right<span class="token punctuation">}</span>
<span class="token selector">.wrap .son2</span><span class="token punctuation">{</span><span class="token property">float</span><span class="token punctuation">:</span>right<span class="token punctuation">}</span>
<span class="token selector">.wrap .son3</span><span class="token punctuation">{</span><span class="token property">float</span><span class="token punctuation">:</span>right<span class="token punctuation">}</span>
<span class="token selector">.wrap .son4</span><span class="token punctuation">{</span><span class="token property">float</span><span class="token punctuation">:</span>right<span class="token punctuation">}</span>
<span class="token comment">/*右浮动:从右往左依次排列
  和左浮动只是浮动反向不一致而已
  而且浮动元素不会从父元素中移出去
*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>很多人很喜欢用浮动</p> <ul><li><p>没有解析空格的存在</p></li> <li><p>完美解析margin,没有垂直外边距合并的问题</p></li></ul> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.wrap&gt; div</span> <span class="token punctuation">{</span><span class="token property">margin</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span><span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>虽然盒子有这么多的好处?</p> <p>但也有<strong>不完美</strong>的地方</p> <blockquote><p>浮动元素不能使用margin:0 auto;进行水平居中了.</p> <p>而且还有高度塌陷问题.</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code>	<span class="token selector">.wrap</span><span class="token punctuation">{</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
			<span class="token comment">/* height: 400px;不给高度会被里面的元素给撑开 */</span>
			<span class="token property">margin</span><span class="token punctuation">:</span> 100px auto 0<span class="token punctuation">;</span>
			<span class="token property">border</span><span class="token punctuation">:</span> 3px solid skyblue<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.wrap .son1</span><span class="token punctuation">{</span><span class="token property">float</span><span class="token punctuation">:</span>left<span class="token punctuation">}</span>
<span class="token selector">.wrap .son2</span><span class="token punctuation">{</span><span class="token property">float</span><span class="token punctuation">:</span>left<span class="token punctuation">}</span>
<span class="token selector">.wrap .son3</span><span class="token punctuation">{</span><span class="token property">float</span><span class="token punctuation">:</span>left<span class="token punctuation">}</span>
<span class="token selector">.wrap .son4</span><span class="token punctuation">{</span><span class="token property">float</span><span class="token punctuation">:</span>left<span class="token punctuation">}</span>
	<span class="token comment">/*此时依次给子元素添加了左浮动,我们的父元素到哪里去了?
    好像变成了一条线,为什么会这样呢?*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>3.<strong>浮动的高度塌陷(大盒子如果不设置高度,内部所有元素浮动,他就会高度塌陷,撑不开大盒子)</strong>,</p> <blockquote><p>为什么会这样呢?</p> <p>实际上时由于里面的这个wrap大盒子这个块级元素以为自己里面什么东西都没有,</p> <p>块级元素本身感受不到浮动元素,但是实际浮动元素在他的头顶上.</p> <p>就像一个农夫养了一群羊.第二天羊全部浮动了.</p> <p>农夫发现自己的羊圈里面没有羊了.就把羊圈给拆了.</p> <p>实际羊全部都飘到天上了,你看不到他们.</p></blockquote> <blockquote><p>一:所以我们写浮动首先要去<strong>定高</strong>,塌陷依旧存在,父级依旧感受不到浮动元素</p> <p>二:BFC块级格式化上下文,最简单的BFC就是给父元素overflow:hidden;</p> <p>然后给父级float:left或者right也能触发bfc</p> <p>BFC相当于给父级修了一道围墙,父级盒子可以去观察到所有层级的盒子.是否有超出的元素,有就涵盖进去.把子元素锁在里面.可能就相当于农夫抬头看到了飘在半空的羊群.</p></blockquote> <p>4.<strong>块级化:将元素强行转化为块级元素</strong></p> <blockquote><p><strong>它具有块元素的所有性质,但是不具有独占一行和父元素宽度100%的特性.</strong></p> <p><strong>而是由里面的元素撑开的,这是浮动的包裹性;</strong></p></blockquote> <p><strong>5.换行方式:</strong></p> <blockquote><p><strong>从第一个元素开始进行浮动排列,依次水平浮动,直到最后一个元素</strong></p> <p><strong>如果当前行排列不下,会原地向下缩直到可以有空间可以浮动排列.不会再往上走了</strong></p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code>   <span class="token selector">.wrap</span><span class="token punctuation">{</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
			<span class="token property">margin</span><span class="token punctuation">:</span> 100px auto 0<span class="token punctuation">;</span><span class="token punctuation">;</span>
			<span class="token property">border</span><span class="token punctuation">:</span> 3px solid skyblue<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">.wrap .son1</span><span class="token punctuation">{</span>
			<span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span> lightgreen<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">.wrap .son2</span><span class="token punctuation">{</span>
			<span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">.wrap .son3</span><span class="token punctuation">{</span>
			<span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">.wrap .son4</span><span class="token punctuation">{</span>
       <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span> purple<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
	&lt;div class=<span class="token string">&quot;wrap&quot;</span>&gt;
		&lt;div&gt;1&lt;/div&gt;
		&lt;div&gt;2&lt;/div&gt;
		&lt;div&gt;3&lt;/div&gt;
		&lt;div&gt;4&lt;/div&gt;
	&lt;/div&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.wrap .son5</span><span class="token punctuation">{</span>
		<span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
		<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
		<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
		<span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
&lt;div&gt;5&lt;/div&gt;
<span class="token comment">/*添加第五个元素会换行显示
  
我们给父元素宽度500px,给第二个元素添加上类名*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.wrap</span><span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span>500px<span class="token punctuation">}</span>

<span class="token selector">.wrap .son2</span><span class="token punctuation">{</span><span class="token property">height</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span><span class="token punctuation">}</span>
	
&lt;div class=<span class="token string">&quot;son2&quot;</span>&gt;2&lt;/div&gt;
<span class="token comment">/*给大盒子宽度减少,第5的盒子被2挡住了,这是怎么回事?
  现在就相当于第5的盒子宽度不够,换行显示,会原地向下缩.
  缩到可以出来的时候,向左边去排列,可是正好就撞到了第2个盒子.
  这时候我们去把第3个盒子高度改大一点*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.wrap .son3</span><span class="token punctuation">{</span><span class="token property">height</span><span class="token punctuation">:</span> 140px<span class="token punctuation">;</span><span class="token punctuation">}</span>

&lt;div class=<span class="token string">&quot;son3&quot;</span>&gt;3&lt;/div&gt;
<span class="token comment">/*减少大盒子的宽度,第5个盒子会被谁挡住
  第5个盒子会在第4个盒子的下面,被第3个盒子挡住
  此时我们去把第3个盒子高度减少*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.wrap .son3</span><span class="token punctuation">{</span><span class="token property">height</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span><span class="token punctuation">}</span>

&lt;div class=<span class="token string">&quot;son3&quot;</span>&gt;3&lt;/div&gt;
<span class="token comment">/*此时会不会向下缩然后被第二个盒子挡住.可是发现第3个盒子的上面有空间然后缩进去
  这里浮动不会去缩进去,浮动就相当于挤痘痘一样.挤出来了不可能再挤回去
  此时我们去把4的高度增加,这时候会挤到哪?*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.wrap .son4</span><span class="token punctuation">{</span><span class="token property">height</span><span class="token punctuation">:</span> 140px<span class="token punctuation">;</span><span class="token punctuation">}</span>

&lt;div class=<span class="token string">&quot;son4&quot;</span>&gt;4&lt;/div&gt;
<span class="token comment">/*此时只会在1的下面,因为向下缩的时候发现前面空间还很足够,就会往前排
  我们把第四个盒子的高度调的很高呢*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.wrap .son4</span><span class="token punctuation">{</span><span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token comment">/*可以看到第五个盒子往下缩了之后不会去填补上面的空白
 我们再去添加一些盒子会发生什么呢?*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.wrap .son6</span><span class="token punctuation">{</span>
		<span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
		<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
		<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
		<span class="token property">background-color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
&lt;div class=<span class="token string">&quot;son6&quot;</span>&gt;6&lt;/div&gt;	
<span class="token comment">/*不会向左边去显示
  多创建几个看看*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;div class=<span class="token string">&quot;son6&quot;</span>&gt;6&lt;/div&gt;	
&lt;div class=<span class="token string">&quot;son6&quot;</span>&gt;6&lt;/div&gt;	
&lt;div class=<span class="token string">&quot;son6&quot;</span>&gt;6&lt;/div&gt;
<span class="token comment">/*当空间足够的时候它就会下来
 为什么会这样呢?我们盒子是按顺序来排列的.在5的后面创建盒子往前面去排列.
 发现前面第4个盒子挡住就只能卡在那了
 
	这样元素不等高浮动换行之后是不是很难看,看都看不懂.
 	所以我们开发的时候尽量保证浮动元素等高.
  等高之后排列方法就跟文字排列方向一致,这是最优秀的方案*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><hr> <h1 id="清除浮动"><a href="#清除浮动" class="header-anchor">#</a> 清除浮动</h1> <blockquote><p><strong>概念:不挨着浮动元素,遇到浮动元素之后换行.清除浮动元素对当前元素所产生的影响</strong></p> <p>可选值</p> <p>​			clear:left清除左侧的浮动元素对当前元素的影响</p> <p>​			clear:right清除右侧的浮动元素对当前元素的影响</p> <p>​			clear:both  有左浮动清除左浮动，有右浮动清除右浮动。清除两侧中最大影响的那侧</p></blockquote> <p>原理</p> <blockquote><p>​		设置清除浮动之后,浏览器会自动为元素添加一个上外边距,以使其位置不受其他元素的影响</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code>   <span class="token selector">.wrap</span><span class="token punctuation">{</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
			<span class="token property">margin</span><span class="token punctuation">:</span> 100px auto 0<span class="token punctuation">;</span><span class="token punctuation">;</span>
			<span class="token property">border</span><span class="token punctuation">:</span> 3px solid skyblue<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
	 <span class="token selector">.wrap .son1</span><span class="token punctuation">{</span>
			<span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span> lightgreen<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">.wrap .son2</span><span class="token punctuation">{</span>
			<span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">.wrap .son3</span><span class="token punctuation">{</span>
			<span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span>
       <span class="token property">clear</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> 
		<span class="token punctuation">}</span>
		<span class="token selector">.wrap .son4</span><span class="token punctuation">{</span>
      		<span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span> purple<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
<span class="token comment">/*我们给第3个盒子添加清除浮动.
  
	这就相当于一段文本,我们让第3个元素直接换行.
  我们给第4个盒子添加清除浮动*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.wrap .son4</span><span class="token punctuation">{</span><span class="token property">clear</span><span class="token punctuation">:</span>left<span class="token punctuation">}</span>
&lt;div class=<span class="token string">&quot;son4&quot;</span>&gt;4&lt;/div&gt;
<span class="token comment">/*第4个盒子和第5个盒子都会下来,另起一行,这跟我们浮动换行挤下来又不一样.
  为什么我们给第4个盒子清除浮动,第5个盒子会下来呢?
  这就相当于浮动元素每个身上都粘着胶水,你给第4个盒子的胶水清除了.
  第四个盒子和第5个盒子还有胶水.所以第4个盒子换行之后会带着第5个盒子一起换行.
*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p><strong>清除浮动clear的值</strong></p> <blockquote><p><strong>left/rigth/both</strong></p> <p>是左浮动清除左浮动,右浮动清除右浮动,</p> <p><strong>有没有有没有一个元素既是左浮动又是右浮动</strong></p> <p><strong>float:right float:left 样式会覆盖,只有一个样式会生效</strong></p> <p><strong>不知道什么浮动无脑clear:both;</strong></p> <p><strong>both有左浮动清除左浮动,有右浮动清除右浮动</strong></p></blockquote> <p><strong>清除浮动来解决高度塌陷</strong></p> <p><strong>新建一个空的块元素，并给他设置clear：both属性 （缺陷：破坏页面的文档结构）</strong></p> <p><strong>完美的方案:利用伪元素</strong></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.clearfix:after</span><span class="token punctuation">{</span>
	  <span class="token property">content</span><span class="token punctuation">:</span><span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
	  <span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span>
	  <span class="token property">clear</span><span class="token punctuation">:</span>both<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*相当于父元素能感受到最底部的块级元素.
  我们手拉手去围一个区域把这些浮动的元素给包裹起来.
	我们就可以通过类名添加选择我们想要解决高度塌陷的元素去清除浮动*/</span>


&lt;div class=<span class="token string">&quot;clearfix&quot;</span>&gt;&lt;/div&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/./guide/notes/css/08-圆角渐变.html" class="prev">
        06-圆角渐变
      </a></span> <span class="next"><a href="/./guide/notes/css/10-定位.html">
        08-定位
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><div class="reco-bgm-panel" data-v-b1d3339e><audio id="bgm" src="https://www.ytmp3.cn/down/75475.mp3" data-v-b1d3339e></audio> <div class="reco-float-box" style="bottom:30px;z-index:999999;display:none;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><img src="https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200" data-v-b1d3339e></div> <div class="reco-bgm-box" style="left:10px;bottom:10px;z-index:999999;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="reco-bgm-cover" style="background-image:url(https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200);" data-v-b1d3339e><div class="mini-operation" style="display:none;" data-v-b1d3339e><i class="reco-bgm reco-bgm-pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play" style="display:none;" data-v-b1d3339e></i></div> <div class="falut-message" style="display:none;" data-v-b1d3339e>
          播放失败
        </div></div> <div class="reco-bgm-info" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-music music" data-v-b1d3339e></i>花花公子</div> <div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-artist" data-v-b1d3339e></i>马思唯/step.jad</div> <div class="reco-bgm-progress" data-v-b1d3339e><div class="progress-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div> <div class="reco-bgm-operation" data-v-b1d3339e><i class="reco-bgm reco-bgm-last last" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-pause pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play play" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-next next" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-volume1 volume" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-mute mute" style="display:none;" data-v-b1d3339e></i> <div class="volume-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div></div> <div class="reco-bgm-left-box" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><i class="reco-bgm reco-bgm-left" data-v-b1d3339e></i></div></div></div></div></div>
    <script src="./assets/js/app.7878252f.js" defer></script><script src="./assets/js/2.877879cc.js" defer></script><script src="./assets/js/24.66bf035d.js" defer></script>
  </body>
</html>
